<template>
  <div>
    <open-modal :openModal="openModal" @closeModal="closeModal">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-maxw640">
        <!-- 月份 -->
        <div class="c-flex-row c-aligni-center c-justify-center c-w100 c-hh76 c-bd-b1 c-p">
          <i
            class="iconfont c-rotate180"
            @click.stop="lastMonth()"
          >&#xe635;</i>
          <span class="c-fs28 c-fc-xblack c-fw600 c-ph32">{{year+'/'+formatNum(month)}}</span>
          <i
            class="iconfont"
            @click.stop="nextMonth()"
          >&#xe635;</i>
          <div
            class="c-pa c-p-r16 c-ww32 c-hh32 c-flex-row c-flex-center"
            @click.stop="closeModal"
          >
            <i class="iconfont c-fc-sgray c-fs32">&#xe750;</i>
          </div>
        </div>
        <!-- 周 -->
        <div class="c-w100 c-flex-row c-justify-sb c-aligni-center c-textAlign-c c-mt24">
          <div
            class="week c-fs20 c-fw500"
            v-for="(item, index) in week"
            :class="item == weeked ?'c-fc-xblack':'c-fc-sgray'"
            :key="index"
          >{{item}}</div>
        </div>
        <!-- 天 -->
        <div class="c-w100 c-flex-row c-flexw-wrap c-aligni-center c-pv28 c-bd-b1">
          <div
            class="week c-fs24 c-flex-row c-justify-center c-aligni-center"
            :class="[item.type == 0?'c-fc-gray':'c-fc-xblack', item.isClick == false ? 'c-fc-gray':'']"
            v-for="(item, index) in dayArr"
            @click.stop="itemClick(item)"
            :key="index"
          >
            <div class="c-ww60 c-hh60 c-flex-row c-flex-center" :class="item.date == localDate?'c-fc-white c-br50 theme-bg':''">{{item.date == nowDateStr ?'今':item.day}}</div>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="c-maxw640 c-hh88 c-ph66 c-flex-row c-flex-center">
          <div
            class="c-w100 c-hh64 c-flex-row c-flex-center theme-bg c-fc-white c-fs24 c-br32"
            @click.stop="closeModal"
          >取消</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
export default {
  name: "Calendar",
  components: {
    OpenModal
  },
  props: {
    openModal: {
      type: Boolean,
      default: true
    },
    // 今天周几
    weeked: {
      type: String,
      default: "",
    },
    // 今天日期
    localDate: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      week: ['日', '一', '二', '三', '四', '五', '六'],
      dayArr: [], // 当前月每日
      nowDateStr: '', // 今天日期
      day: new Date().getDate(), // 当前日
      year: new Date().getFullYear(), // 当前年
      month: new Date().getMonth() + 1, // 当前月
    }
  },
  watch: {
    weeked: function (weeked) {
      this.weeked = weeked.replace("周", "") || this.week[new Date().getDay()];
    },
    localDate: function (localDate) {
      this.localDate = localDate;
      this.month = new Date(this.localDate).getMonth() + 1;
      this.initDate();
    }
  },
  mounted() {
    // 初始日期
    this.initDate();
  },
  methods: {
    // 初始化日期
    initDate() {
      this.dayArr = [];
      // 今天日期
      this.nowDateStr = utilJs.dateFormat(+new Date());
      this.localDate = this.localDate;
      // 当前月总天数
      let totalDay = new Date(this.year, this.month, 0).getDate();
      // 遍历总天数日期逐个添加数组
      for (let i = 1; i <= totalDay; i++) {
        // 得到需补充天数
        let value = (new Date(this.year, this.month - 1, i)).getDay();
        // 补充前面空白日期
        if (i == 1 && value != 0) this.addBefore(value);
        // 添加本月日期
        let obj = {};
        let itemType = 1;
        let starDate = this.year + '-' + this.formatNum(this.month) + '-' + this.formatNum(i);
        // 判断是否可点击
        if (starDate.replace(/-/g, "/") < this.nowDateStr.replace(/-/g, "/")) {
          obj.isClick = false;
        } else {
          obj.isClick = true;
        }
        obj.date = starDate;
        obj.day = i;
        obj.type = itemType;
        this.dayArr.push(obj);
        // 补充后面空白日期
        if (i == totalDay && value != 6) this.addAfter(value);
      }
    },
    // 补充前面空白日期
    addBefore(value) {
      let totalDay = new Date(this.year, this.month - 1, 0).getDate();
      let itemType = 0;
      for (let i = 0; i < value; i++) {
        let obj = {};
        let starDate = this.year + '-' + this.formatNum(this.month - 1) + '-' + this.formatNum(totalDay - (value - i) + 1);
        if (starDate.replace(/-/g, "/") < this.nowDateStr.replace(/-/g, "/")) {
          obj.isClick = false;
        } else {
          obj.isClick = true;
        }
        obj.date = starDate;
        obj.day = totalDay - (value - i) + 1;
        obj.type = itemType;
        this.dayArr.push(obj);
      }
    },
    // 补充后空白日期
    addAfter(value) {
      let itemType = 0;
      for (let i = 0; i < (6 - value); i++) {
        let obj = {};
        let starDate = this.year + '-' + this.formatNum(this.month + 1) + '-' + this.formatNum(i + 1);
        if (starDate.replace(/-/g, "/") < this.nowDateStr.replace(/-/g, "/")) {
          obj.isClick = false;
        } else {
          obj.isClick = true;
        }
        obj.date = starDate;
        obj.day = i + 1;
        obj.type = itemType;
        this.dayArr.push(obj);
      }
    },
    // 格式化日期位数
    formatNum(num) {
      return num < 10 ? ('0' + num) : num;
    },
    lastMonth() {
      if (this.month == 1) {
        this.year -= 1;
        this.month = 12;
      } else {
        this.month -= 1;
      }
      this.initDate();
    },
    nextMonth() {
      if (this.month == 12) {
        this.year += 1;
        this.month = 1;
      } else {
        this.month += 1;
      }
      this.initDate();
    },
    itemClick(obj) {
      this.$emit('itemClick', obj)
    },
    closeModal() {
      this.$emit('closeModal')
    }
  }
}
</script>

<style lang="less" scoped>
.week {
  width: 14.28%;
}
</style>